import { defineStore } from "pinia";

const useTodosStore = defineStore("todos", {
  state() {
    return {
      list: JSON.parse(localStorage.getItem("todos")) || [],
      // 定义过滤的状态数组
      filterArr: ["All", "Active", "Completed"],
      // 定义当前的状态
      active: "All",
    };
  },

  getters: {
    // 判断list中每一项都为true，就是全选
    isCheckAll() {
      return this.list.length > 0 && this.list.every((v) => v.done);
    },
    // 计算未完成项
    leftCount() {
      return this.list.filter((v) => v.done === false).length;
    },
    // 根据 active 状态，筛选出对应的数据，页面渲染这个额数据即可
    showList() {
      if (this.active === "All") {
        return this.list;
      } else if (this.active === "Active") {
        return this.list.filter((v) => !v.done);
      } else if (this.active === "Completed") {
        return this.list.filter((v) => v.done);
      }
    },
  },

  actions: {
    changeDone(id) {
      // 先查找到id对应的数据，改变状态即可
      const obj = this.list.find((v) => v.id === id);
      obj.done = !obj.done;
    },
    del(id) {
      // 把传过来的id数据删除掉，也就是只需要保留下 id 不等于传过来的 id 即可
      this.list = this.list.filter((v) => v.id !== id);
    },
    add(name) {
      this.list.unshift({
        id: Date.now(),
        name,
        done: false,
      });
    },
    // 全选/反选切换
    changeAll(bl) {
      this.list.forEach((v) => (v.done = bl));
    },
    // 清理已完成
    clearDone() {
      this.list = this.list.filter((v) => !v.done);
    },
    changeActive(item) {
      this.active = item;
    },
  },
});

export default useTodosStore;
